import { SubmitPracticeApi } from '@/api';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import Choose from './components/choose';
import Fill from './components/fill';
import { Swiper, SwiperSlide } from 'swiper/react';
import EventNoteSharpIcon from '@mui/icons-material/EventNoteSharp';
import 'swiper/css';
import './index.less';
import GoBack from '@/components/goback';
// interface IProps {
//   data: ISubmitPractice[];
// }
export default function Study() {
  const location = useLocation();
  // console.log(location);
  const [list, setList] = useState<ISubmitPractice[]>([]);
  const chooseType = ['many', 'one', 'check'];
  // 习题初始索引值
  const [cur, setCur] = useState(1);

  useEffect(() => {
    SubmitPracticeApi(location.state as IDataParams).then((res) => {
      // console.log(res);
      if (res.errCode === 0) {
        setList(res.data);
      }
    });
  }, []);
  return (
    <div className="study">
      <section className="top">
        <EventNoteSharpIcon />
        <span>
          {cur} / {list.length}
        </span>
      </section>
      <div className="list">
        <Swiper
          onSlideChange={(e) => {
            // console.log(e.activeIndex);
            setCur(e.activeIndex + 1);
          }}
        >
          {/*  如果是选择题，渲染选择题组件 否则就渲染填空题组件*/}
          {list.map((item) => (
            <SwiperSlide key={item.id}>
              {chooseType.includes(item.questionType) ? (
                <Choose data={item} />
              ) : (
                <Fill data={item} />
              )}
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <GoBack></GoBack>
    </div>
  );
}
